Что нового в DevTools, Chrome 135

Софья Емельянова
Sofia Emelianova
GitHub

Улучшения панели производительности

В этой версии реализован ряд улучшений панели «Производительность» .

Ссылки на источники и скрипты для вызовов профилей и функций в Performance

На вкладке «Производительность» > «Сводка» теперь отображаются ссылки на соответствующие скрипты и источники для вызовов профилей и функций, поэтому вам не нужно наводить курсор на эти события в главном треке.

До и после добавления источника и происхождения на вкладку «Сводка».

Кроме того, при наведении курсора на события в сетевых и основных треках теперь отображаются сторонние имена (если таковые имеются) в подсказках.

Проблема с хромом: 368541957 .

Поддержка полевых данных «LCP по фазе»

При включенных полевых данных аналитика «Производительность» > «Аналитика» > «LCP по фазе» теперь показывает 75-й процентиль времени изображения из отчета Chrome UX в дополнительной таблице, поэтому вы можете сравнивать время прямо в аналитике.

До и после добавления полевых данных в поддержку анализа «LCP по фазам».

Понимание «дерева сетевых зависимостей»

Вкладка Performance > Insights добавляет в свою коллекцию новый анализ дерева зависимостей сети . Анализ сообщает, есть ли у вас цепочки критических запросов, что не рекомендуется. Наведите указатель мыши на запросы, перечисленные в анализе, чтобы увидеть их выделенными в дорожке сети .

Чтобы узнать больше, см. раздел Избегайте цепочки критических запросов .

Самая тяжелая подсветка стека

Панель Performance теперь выделяет элементы в Main track при наведении на них курсора в Call tree или Bottom-up > Heaviest stack sidebar и затемняет остальные. Это позволяет визуально находить вложенные элементы в call stack, которые занимают больше всего времени.

Древовидное представление доступности в Elements

Вид дерева доступности на всю страницу теперь включен по умолчанию на панели «Элементы» .

Раньше вы могли просматривать отдельное дерево доступности на вкладке Элементы > Доступность . Теперь вы можете нажать кнопку Переключиться на вид дерева доступности в правом верхнем углу дерева DOM на панели Элементы , чтобы переключаться между деревьями доступности DOM и всей страницы, чтобы вам было проще исследовать их и их связь.

До и после включения полностраничного вида дерева специальных возможностей по умолчанию.

Дерево доступности позволяет вам проверять, как вспомогательные технологии видят ваш контент, и показывает вам атрибуты ARIA и вычисляемые свойства доступности узлов DOM. Чтобы узнать больше, см. Полное дерево доступности в Chrome DevTools .

Проблема с хромом: 40808541 .

Улучшены пустые состояния для различных панелей.

Пустые состояния (когда ничего не открыто) для различных панелей, разделов и вкладок были упрощены, чтобы вы точно знали, что делать, чтобы начать работать с ними. Некоторые пустые состояния, например, на панели «Сеть» , теперь имеют соответствующие полезные кнопки, такие как «Перезагрузить страницу» .

До и после улучшения пустых состояний на панелях «Сеть» и «Поиск».

Опция «Спросить ИИ» перемещена в нижнюю часть меню.

Опция «Спросить ИИ» теперь находится внизу раскрывающихся меню, а не вверху.

До и после перемещения опции «Спросить ИИ» в нижнюю часть раскрывающегося меню.

Не стесняйтесь оставлять свои отзывы о панели помощи ИИ по адресу crbug.com/364805393 .

Маяк 12.4.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.4.0.

Эта версия отмечает некоторые аудиты производительности как информативные при условиях прохождения, а не скрывает их в разделе пройденных аудитов. Полный список изменений см.

Чтобы изучить основы использования панели Lighthouse в DevTools, см. раздел Lighthouse: Оптимизация скорости веб-сайта .

Проблема с хромом: 40543651 .

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

  • Производительность > Сводка : заменены две строки «Общее время» и «Собственное время» на одну строку «Длительность », которая также показывает (self time) в скобках, если таковое имеется ( crbug.com/395572753 ).
  • Проблемы : Добавлены новые типы проблем: проблемы <select> в дереве доступности и ошибки подписи сообщений SRI, возникающие во время анализа или проверки в сетевой службе ( crbug.com/381044049 , crbug.com/347890366 ).
  • Доступность : вкладка «Элементы» > «Стили» теперь отображает элементы, по которым вы переходите с помощью навигации с помощью клавиатуры ( crbug.com/396311936 ).
  • Элементы : проблемы с <select> теперь поддерживаются и выделяются волнистым подчеркиванием ( crbug.com/378738916 ).
  • Сеть : значки «точка переопределения» и предупреждения о файлах cookie теперь отображаются справа от имени вкладки, а не слева ( crbug.com/390556283 ).

Загрузите каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие варианты для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .

,

Софья Емельянова
Sofia Emelianova
GitHub

Улучшения панели производительности

В этой версии реализован ряд улучшений панели «Производительность» .

Ссылки на источники и скрипты для вызовов профилей и функций в Performance

На вкладке «Производительность» > «Сводка» теперь отображаются ссылки на соответствующие скрипты и источники для вызовов профилей и функций, поэтому вам не нужно наводить курсор на эти события в главном треке.

До и после добавления источника и происхождения на вкладку «Сводка».

Кроме того, при наведении курсора на события в сетевых и основных треках теперь отображаются сторонние имена (если таковые имеются) в подсказках.

Проблема с хромом: 368541957 .

Поддержка полевых данных «LCP по фазе»

При включенных полевых данных аналитика «Производительность» > «Аналитика» > «LCP по фазе» теперь показывает 75-й процентиль времени изображения из отчета Chrome UX в дополнительной таблице, поэтому вы можете сравнивать время прямо в аналитике.

До и после добавления полевых данных в поддержку анализа «LCP по фазам».

Понимание «дерева сетевых зависимостей»

Вкладка Performance > Insights добавляет в свою коллекцию новый анализ дерева зависимостей сети . Анализ сообщает, есть ли у вас цепочки критических запросов, что не рекомендуется. Наведите указатель мыши на запросы, перечисленные в анализе, чтобы увидеть их выделенными в дорожке сети .

Чтобы узнать больше, см. раздел Избегайте цепочки критических запросов .

Самая тяжелая подсветка стека

Панель Performance теперь выделяет элементы в Main track при наведении на них курсора в Call tree или Bottom-up > Heaviest stack sidebar и затемняет остальные. Это позволяет визуально находить вложенные элементы в call stack, которые занимают больше всего времени.

Древовидное представление доступности в Elements

Вид дерева доступности на всю страницу теперь включен по умолчанию на панели «Элементы» .

Раньше вы могли просматривать отдельное дерево доступности на вкладке Элементы > Доступность . Теперь вы можете нажать кнопку Переключиться на вид дерева доступности в правом верхнем углу дерева DOM на панели Элементы , чтобы переключаться между деревьями доступности DOM и всей страницы, чтобы вам было проще исследовать их и их связь.

До и после включения полностраничного вида дерева специальных возможностей по умолчанию.

Дерево доступности позволяет вам проверять, как вспомогательные технологии видят ваш контент, и показывает вам атрибуты ARIA и вычисляемые свойства доступности узлов DOM. Чтобы узнать больше, см. Полное дерево доступности в Chrome DevTools .

Проблема с хромом: 40808541 .

Улучшены пустые состояния для различных панелей.

Пустые состояния (когда ничего не открыто) для различных панелей, разделов и вкладок были упрощены, чтобы вы точно знали, что делать, чтобы начать работать с ними. Некоторые пустые состояния, например, на панели «Сеть» , теперь имеют соответствующие полезные кнопки, такие как «Перезагрузить страницу» .

До и после улучшения пустых состояний на панелях «Сеть» и «Поиск».

Опция «Спросить ИИ» перемещена в нижнюю часть меню.

Опция «Спросить ИИ» теперь находится внизу раскрывающихся меню, а не вверху.

До и после перемещения опции «Спросить ИИ» в нижнюю часть раскрывающегося меню.

Не стесняйтесь оставлять свои отзывы о панели помощи ИИ по адресу crbug.com/364805393 .

Маяк 12.4.0

Панель Lighthouse теперь работает под управлением Lighthouse 12.4.0.

Эта версия отмечает некоторые аудиты производительности как информативные при условиях прохождения, а не скрывает их в разделе пройденных аудитов. Полный список изменений см.

Чтобы изучить основы использования панели Lighthouse в DevTools, см. раздел Lighthouse: Оптимизация скорости веб-сайта .

Проблема с хромом: 40543651 .

Разные моменты

Вот некоторые важные исправления и улучшения в этом выпуске:

  • Производительность > Сводка : заменены две строки «Общее время» и «Собственное время» на одну строку «Длительность », которая также показывает (self time) в скобках, если таковое имеется ( crbug.com/395572753 ).
  • Проблемы : Добавлены новые типы проблем: проблемы <select> в дереве доступности и ошибки подписи сообщений SRI, возникающие во время анализа или проверки в сетевой службе ( crbug.com/381044049 , crbug.com/347890366 ).
  • Доступность : вкладка «Элементы» > «Стили» теперь отображает элементы, по которым вы переходите с помощью навигации с помощью клавиатуры ( crbug.com/396311936 ).
  • Элементы : проблемы с <select> теперь поддерживаются и выделяются волнистым подчеркиванием ( crbug.com/378738916 ).
  • Сеть : значки «точка переопределения» и предупреждения о файлах cookie теперь отображаются справа от имени вкладки, а не слева ( crbug.com/390556283 ).

Загрузите каналы предварительного просмотра

Рассмотрите возможность использования Chrome Canary , Dev или Beta в качестве браузера для разработки по умолчанию. Эти каналы предварительного просмотра предоставляют вам доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают находить проблемы на вашем сайте до того, как это сделают ваши пользователи!

Свяжитесь с командой Chrome DevTools

Используйте следующие варианты для обсуждения новых функций, обновлений или чего-либо еще, связанного с DevTools.

Что нового в DevTools

Список всего, что было рассмотрено в серии «Что нового в DevTools» .